<template>
  <div class="home-container">
    <el-space wrap :size="20">
      <el-card class="box-card" shadow="hover">
        <el-descriptions :title="'欢迎您回来, ' + userInfo.username" :column="1" size="large" border>
          <el-descriptions-item label="登录IP">{{ userInfo.loginIp }}</el-descriptions-item>
          <el-descriptions-item label="登录时间">{{ userInfo.loginDate }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-space>
  </div>
</template>

<script setup>
import { GetUserInfo } from '@/api/users'
import { DateFormat } from '@/utils/CommonFun.js'
import { ref } from 'vue'
import { useStore } from 'vuex'
const store = useStore()

const userInfo = ref(store.getters.userInfo)
const getUserInfo = () => {
  GetUserInfo()
    .then(data => {
      data.userInfo.createTime = DateFormat.format(data.userInfo.createTime)
      data.userInfo.loginDate = DateFormat.format(data.userInfo.loginDate)
      userInfo.value = data.userInfo
      store.commit('app/setUserInfo', userInfo.value)
    })
}
// 如果没有用户信息才进行用户信息的获取
if (!userInfo.value.id) {
  getUserInfo()
}
</script>

<style lang="scss" scoped>
.home-container{
  display: flex;
  .box-card{
    min-width: 350px;
  }
}
</style>
